<template>
  <div class="form-selector">
    <!-- disabled 输入框 -->
    <FormInput
      v-model="iptDesc"
      :label="label"
      :placeholder="placeholder"
      :rules="rules"
      :iconSrc="iconSrc"
      :iconWidth="iconWidth"
      :showBottomUnlegalMsg="showBottomUnlegalMsg"
      :showRequire="showRequire"
      disabled
      picker
      :pickerDisabled="disabled"
      @formInputClick="open"
      @iconClick="open"
      @updateVali="handlerUpdateVali"
      ref="fi"
    ></FormInput>

    <transition name="bottomToTop05">
      <Selector
        v-show="showSelector"
        :selectData="selectData"
        :type="type"
        @select="select"
        @close="close"
      ></Selector>
    </transition>
  </div>
</template>

<script>
import FormInput from "./FormInput";
import Selector from "./child/Selector";
export default {
  name: "formSelector",
  components: {
    FormInput,
    Selector
  },
  props: {
    // 左侧的label描述
    label: {
      type: String,
      default: undefined
    },
    // iconSrc
    iconSrc: {
      type: String,
      default: require("@/assets/imgs/common/icon/icon_arrow_right.png")
    },
    // icon宽度
    iconWidth: {
      type: Number,
      default: 7
    },
    // 当前选中的数据
    selectData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // selector类型：job：职业，address：地区
    type: {
      type: String,
      default: "job"
    },
    // rules校验规则
    rules: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // placeholder
    placeholder: {
      type: String,
      default: undefined
    },
    // disabled
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否在必填的时候显示*
    showRequire: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      iptDesc: "", // 输入框desc
      showBottomUnlegalMsg: false, // 是否显示底部错误信息
      showSelector: false, // 是否显示选择器
      storeScrollTop: 0, // 存储的选择器显示时网页的滚动高度
      // 当前验证状态
      vali: {
        status: false, // 校验结果，符合rules为true，不符合为false
        msg: "" // 校验信息
      }
    };
  },
  computed: {
    // 展示的描述
    showDesc() {
      const selectData = this.selectData;
      if (this.type === "address") {
        // 地址选择器
        return (
          selectData.provinceDesc + selectData.cityDesc + selectData.areaDesc
        );
      } else {
        // 其他选择器
        return selectData.desc;
      }
    }
  },
  watch: {
    showSelector(newVal) {
      if (newVal) {
        // 选择器弹出
        // 不显示底部错误信息
        this.showBottomUnlegalMsg = false;
        // fixed body
        // this.fixedBody(true);
      } else {
        // 选择器隐藏
        // 显示底部错误信息
        this.showBottomUnlegalMsg = true;
        // 移除fixed body并滚回之前记录的高度
        // this.fixedBody(false, true);
      }
    },
    // 展示的描述发生变化，更新输入框绑定的iptDesc
    showDesc: {
      handler(newVal) {
        this.iptDesc = newVal;
      },
      immediate: true
    }
  },
  created() {},
  deactivated() {
    // 移除fixed body
    // this.fixedBody(false);
  },
  beforeDestroy() {
    // 移除fixed body
    // this.fixedBody(false);
  },
  methods: {
    // fixed body防止滚动穿透
    fixedBody(flag, needScroll = false) {
      const body = document.querySelector("body");

      if (flag) {
        // 记录选择器显示时网页的滚动高度
        this.storeScrollTop = utils.ui.getScrollTop();
        // 设置body为fixed
        body.style.height = "100vh";
        body.style.overflow = "hidden";
        body.style.position = "fixed";
      } else {
        // 去除body fixed
        body.style.height = "";
        body.style.overflow = "";
        body.style.position = "";
        // 滚回到原来的高度
        if (needScroll) {
          window.scrollTo(0, this.storeScrollTop);
        }
      }
    },
    // 打开选择器
    open() {
      if (this.disabled) return;

      this.showSelector = true;
    },
    // 关闭选择器
    close() {
      this.showSelector = false;
    },
    // 选中
    select(item) {
      // 赋值对象属性
      this.$emit("update:selectData", item);
      // 触发select事件
      this.$emit("select", item);
      // 关闭选择器
      this.close();
    },
    // 根组件vali更新处理：更新当前组件的vali，保持同步
    handlerUpdateVali(vali) {
      this.vali = vali;
    }
  }
};
</script>

<style lang="scss" scoped></style>
